<template>
  <el-card class="filter-card">
    <el-form :model="filterModel" label-width="80px" class="filter-form">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="时间范围">
            <el-select 
              v-model="filterModel.dateRange" 
              placeholder="请选择时间范围" 
              style="width: 100%"
              @change="handleDateRangeChange"
            >
              <el-option label="全部" value="all"></el-option>
              <el-option label="今天" value="today"></el-option>
              <el-option label="近一周" value="week"></el-option>
              <el-option label="近一月" value="month"></el-option>
              <el-option label="自定义" value="custom"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        
        <el-col :span="6" v-if="filterModel.dateRange === 'custom'">
          <el-form-item label="自定义">
            <el-date-picker
              v-model="filterModel.dateRangeCustom"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        
        <el-col :span="6">
          <el-form-item label="关键词">
            <el-input 
              v-model="filterModel.search" 
              placeholder="请输入搜索关键词"
              clearable
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label=" ">
            <el-button type="primary" @click="handleSearch" icon="Search">搜索</el-button>
            <el-button @click="handleReset" icon="Refresh">重置</el-button>
            <el-button type="success" @click="handleBatchSync" icon="RefreshRight">批量同步</el-button>
            <el-button @click="handleExport" icon="Download">导出</el-button>
            <el-dropdown @command="handleMoreAction" v-if="showMoreActions">
              <el-button>
                更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="import">导入数据</el-dropdown-item>
                  <el-dropdown-item command="deleteAll">删除全部</el-dropdown-item>
                  <el-dropdown-item command="advanced">高级筛选</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref, reactive, defineProps, defineEmits } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, ArrowDown } from '@element-plus/icons-vue'

const props = defineProps({
  dateRange: {
    type: String,
    default: 'all'
  },
  search: {
    type: String,
    default: ''
  },
  showMoreActions: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:date-range', 'update:search', 'refresh', 'batch-sync', 'export', 'import', 'delete-all', 'advanced-filter'])

const filterModel = reactive({
  dateRange: props.dateRange,
  dateRangeCustom: [],
  search: props.search
})

const handleDateRangeChange = (value) => {
  emit('update:date-range', value)
}

const handleSearch = () => {
  emit('update:search', filterModel.search)
  emit('refresh')
}

const handleReset = () => {
  filterModel.dateRange = 'all'
  filterModel.dateRangeCustom = []
  filterModel.search = ''
  emit('update:date-range', 'all')
  emit('update:search', '')
  emit('refresh')
}

const handleBatchSync = () => {
  emit('batch-sync')
}

const handleExport = () => {
  emit('export')
}

const handleMoreAction = (command) => {
  switch (command) {
    case 'import':
      emit('import')
      break
    case 'deleteAll':
      ElMessageBox.confirm('确定要删除全部数据吗？', '删除全部', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        emit('delete-all')
      }).catch(() => {
        ElMessage.info('已取消操作')
      })
      break
    case 'advanced':
      emit('advanced-filter')
      break
  }
}
</script>

<style scoped>
.filter-card {
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.filter-form {
  padding: 20px 0;
}
</style>